<template>
  <div class="nav_outer">
    <Header>我的钱包</Header>
    <div class="content">
      <div class="card">
        <div class="tright card_detail" @click="navito('walletdetail')">明细</div>
        <div class="card_title">账户余额</div>
        <div class="account">¥ {{parseFloat(account.money || 0).toFixed(2)}}</div>
        <div class="flex_bet">
          <div class="transcord" @click="trans">我要提现</div>
          <div class="addbank">
            <img src="../assets/img/yinxingqia@2x.png" alt="">
            <span @click="navito('addbankcard')">添加银行卡</span>
          </div>
        </div>
      </div>
      <div class="verify flex_bet">
        <div>
          <h5>实名认证</h5>
          <p>进行实名认证,确保账户资金安全</p>
        </div>
        <div style="color: #FFAE21;font-size: 0.9em" @click="navito('verify')">
          <span v-if="user.name && user.cardPicBack && user.cardPicFront">已认证</span>
          <span v-else>去认证</span>
          <span class="mui-icon mui-icon-arrowright"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import Header from '@/components/commonComponents/Header'
export default {
  data() {
    return {
      account:{}
    }
  },
  computed: {
    ...mapState({
      user: function(){return this.$store.state.user}
    })
  },
  mounted() {
    let mui = this.mui;
  },
  created(){
    this.loadAccount();
  },
  methods: {
    navito(url){
      this.$router.push({path:url}); 
    },
    trans(){
      if(!this.user.name || !this.user.cardPicBack || !this.user.cardPicFront){
        this.mui.toast('未实名认证');
        return;
      }
      if(!this.account.money){
        this.mui.toast('金额不足');
        return;
      }
      this.navito('transcord')
    },
    loadAccount(){
      let userId = localStorage.getItem('uid');
      this.Http2.get(`/mobile/myaccount/myAccount/${userId}`, null).then(
        res => {
            this.account = res || {};
        },
        err => {
          if(err.response.data.code==1){//code为1，给他创建个账户
            this.createAccount();
          }
        }
      );
    },
    createAccount(){
      this.Http2.jsonpost(`/mobile/myaccount/save`, JSON.stringify({
        type: 2,
        userId: this.$store.state.user.id
      })).then(
        res => {
          this.account = res || {};
        }
      );
    }
  },
  components: {
    Header
  }
}
</script>

<style lang='scss' scoped>
  @function px2em($px) {
    @if (unitless($px)) {
      @return px2em($px + 0px);
    } @else if (unit($px) == em) {
      @return $px;
    }
    @return ($px / 75px) * 1rem;
  }
  .verify{
     margin: px2em(30);
     padding: px2em(20) px2em(36);
     background: #fff;
     box-shadow: 0 0 10px #ddd;
     border-radius: 8px;
     h5{
      font-weight: bold;
      font-size: 1.1em;
      color: #666;
      margin-bottom: px2em(40);
     }
     p{
      margin-bottom: 0;
     }
  }
  .card{
    margin: px2em(4) px2em(30);
    background: linear-gradient(to right,#458DE2, #5575FE);
    border-radius: 8px;
    color: #fff;
    box-shadow: 0 0 10px #aaa;
    .card_detail{
      padding: px2em(16) px2em(30) 0 px2em(30);
      font-size: 0.8em;
    }
    .card_title{
      height: px2em(52);
      width: px2em(340);
      line-height: px2em(52);
      padding-left: 1em;
      background: linear-gradient(to right, #006EF4 , #4683ED);
    }
    .account{
      padding: px2em(48) px2em(46); 
      font-size: 2em;
    }
    .flex_bet{
      padding: px2em(26) px2em(36);
      border-top: 1px solid rgba(255,255,255,.2)
    }
    .addbank>img{
      width: px2em(40);
      vertical-align: middle;
      margin-right: 5px;
    }
  }
</style>